<template>
  <div id="main">

    <h2>精彩瞬间列表</h2>

    <!-- <el-button type="primary" style="margin-left:20px" @click="handleOpen('添加管理员用户',1)">添加用户</el-button> -->

    <div id="table-area">
      <el-table
        v-loading="listLoading"
        :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >

        <!-- <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
        >
          <template scope="scope">
            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column> -->

        <el-table-column
          align="center"
          prop="momentId"
          label="精彩瞬间Id"
        />

        <el-table-column
          align="center"
          prop="momentUserId"
          label="精彩瞬间发布者"
        />

        <el-table-column
          align="center"
          prop="momentStatus"
          label="精彩瞬间状态"
        >
          <template slot-scope="Scope">
            <span v-if="Scope.row.momentStatus==0">未审核</span>
            <span v-if="Scope.row.momentStatus==1">已审核</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="Scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleOpen(Scope.row.momentId)">详情</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(Scope.row.momentId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div id="pages">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="pagesize"
          layout="total, sizes,prev, pager, next"
          :total="list.length"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog title="精彩瞬间详情" :close-on-click-modal="false" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form ref="moment" :model="moment" label-position="top">

        <el-form-item prop="momentId" label="精彩瞬间编号" :label-width="formLabelWidth">
          <el-input v-model="moment.momentId" readonly />
        </el-form-item>
        <el-form-item prop="momentUserId" label="精彩瞬间发布者" :label-width="formLabelWidth">
          <el-input
            v-model="moment.momentUserId"
            autocomplete="off"
            readonly
          />
        </el-form-item>
        <el-form-item prop="momentContent" label="精彩瞬间内容" :label-width="formLabelWidth">
          <el-input v-model="moment.momentContent" type="textarea" :autosize="{ minRows: 5, maxRows: 100}" maxlength="4000" autocomplete="off" />
        </el-form-item>
        <!-- <el-form-item label="精彩瞬间图片" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            name="files"
            :action="url"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="5"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="handleAvatarSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="轮播图" :label-width="formLabelWidth" prop="momentContentImg">
          <el-upload
            :action="url"
            list-type="picture-card"
            :on-success="handleContentSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="contentFileList"
            disabled
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">取 消</el-button>
        <el-button type="warning" @click="auditMoment()">审核</el-button>
      </div>
    </el-dialog>

  </div>

</template>
<script>
import { getMoment, getMomentById, deleteMoment, updateMoment } from '@/api/moment'
export default {

  data() {
    return {
      currentPage: 1, // 默认显示页面为1
      pagesize: 5, //    每页的数据条数
      // url: process.env.VUE_APP_BASE_API + 'file/',
      url: 'https://www.whwmiki.cn/fy/api/file/',
      list: [],
      listLoading: false,
      dialogFormVisible: false,
      org: {},
      editType: 2, // 1 添加 2 修改
      moment: {},
      formLabelWidth: '200px',
      dialogImageUrl: '',
      contentFileList: [],
      imgList: [],
      dialogVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 每页下拉显示数据
    handleSizeChange: function(size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    handleClick(row) {
      console.log(row)
    },
    handleRemove(file, fileList) {
      this.contentFileList = fileList
      const list = fileList.map((item) => { return item.response.obj })
      this.act.actContentImg = list.join('')
      console.log(this.act.actContentImg)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleContentSuccess(res, file, fileList) {
      console.log(fileList)
      if (res.result === true) {
        this.$notify({
          title: '成功',
          message: '图片上传成功',
          type: 'success'
        })
        this.act.actContentImg += res.obj
        this.contentFileList = fileList
      } else {
        this.$notify({
          title: '成功',
          message: '图片上传失败',
          type: 'error'
        })
      }
    },
    fetchData() {
      this.search = {}
      this.listLoading = true
      getMoment().then((data) => {
        this.list = data.obj
        this.listLoading = false
      })
    },
    handleDelete(id, username) {
      this.$confirm('确认删除该精彩瞬间？').then(() => deleteMoment(id).then((data) => {
        this.$notify({
          title: '操作成功',
          type: 'success'
        })
        const totalPage = Math.ceil((this.list.length - 1) / this.pagesize)
        const page = this.currentPage > totalPage ? totalPage : this.currentPage
        this.currentPage = this.currentPage < 1 ? 1 : page
        this.fetchData()
      }))
    },
    handleOpen(id) {
      this.moment = {}
      this.dialogFormVisible = true
      this.title = '精彩瞬间详情'
      console.log(id)
      getMomentById(id).then((resp) => {
        this.moment = resp.obj
        this.imgList = this.moment.momentContentImg.split(';')
        console.log(this.imgList)
        if (resp.obj.momentContentImg) { // 后台返回的文件链接
          const a = (resp.obj.momentContentImg).split(';')
          a.length -= 1
          if (a.length > 0) {
            a.forEach(item => {
              var obj = {}
              const index = item.lastIndexOf('\/')
              const fileName = item.substring(index + 1, item.length) // 最后的文件名截取出来
              const response = {}
              response.obj = item + ';'
              this.$set(obj, 'name', fileName)
              this.$set(obj, 'response', response) // 修改files里面的结构（name,url）
              this.$set(obj, 'url', response.obj)
              this.contentFileList.push(obj)
            })
          }
          console.log(this.contentFileList)
        }
      })
    },
    handleClose() {
      this.dialogFormVisible = false
      this.moment = {}
      this.contentFileList = []
    },
    auditMoment() {
      updateMoment(this.moment.momentId).then((resp) => {
        this.$notify({
          title: '修改成功',
          type: 'success'
        })
        this.dialogFormVisible = false
        this.moment = {}
        this.contentFileList = []
        this.fetchData()
      })
    }
  }
}
</script>

<style scoped>
#main{
  margin-left: 5px;
  margin-right: 5px;
}
#table-area{
  margin-left: 10px;
  margin-right: 10px;
}
#search-card {
  line-height: 0px;
  text-align: right;
  width: 100%;
  height: 70px;
  overflow-x: hidden;
}
</style>
